<template>
  <div class="save-wrapper ui" >
    <component is='productType_conf' v-if="query._id"></component>
    <t-field :withPop="1==1" minHeight="300px" :active="1==1" :data="attrNameOptions" @onchange="nameChange" @onsubmit="nameSave" @oncancel="nameCancel" v-else></t-field>
  </div>
</template>
<script>
  import tool from 'src/util/tool';
  import util from '_util/index';
  import logic from '_logic';

  import productType_conf from './productType/conf';
  import tField from 'components/tunit/tFields'

  export default {
    data() {
      return {
        query: {},
        params:{},
        attrNameOptions:[
          {
            label: "顶级分类",
            placeholder: "请选择类型",
            name: "parent_id",
            show_type:"select",
            element:[],
          },
          {
            label: "类型名称",
            name: "name",
            show_type: "input"
		},
		{
			label: "类型图标(建议尺寸：94*94)",
			name: "pic_url",
			show_type: "upload",
			pic_dir:1,
			value:""
		}
        ]
      }
    },
    methods:{
       /* 数据操作 */
      getData({url=[], data={}, callback=null, error=false, msg=null}){
        url = tool.getApi(this, url[0], url[1]);
        util.http.SR(this, url, data, msg, callback, {}, error);
      },
      getTopclass(){
        let _this = this;
        this.getData({
          url:["ProductType", "getTopType"],
          callback(rs){
            _this.attrNameOptions[0].element = rs.map(({id, title})=>{
              return {label: title, value: id}
            })
          }
        })
      },
      pageInit(){
        let {ctl, title="", _id=""} = this.query;
        if(!_id){
          this.getTopclass();
        }
      },
      nameChange({name, value=""}){
        this.params[name] = value;
      },
      nameCancel(){
        this.$router.go(-1);
      },
      nameSave(){
        if(!this.params.parent_id){
          util.showMsg(this,'warning','请选择顶级分类');
          return;
        };
        if(!this.params.name){
          util.showMsg(this,'warning','请填写分类名称');
          return;
        };
        util.showConfirm(this, () => {

          this.doNameSave()
        },{content:'确认提交吗？'});
      },
      doNameSave(){
        let _this = this;
        this.getData({
          url:['ProductType', 'insert'],
          data: this.params,
          msg: `分类 [${_this.params.name}] 添加成功`,
          callback(rs){
            _this.$router.push({path: '/page/edit', query:{ctl:'ProductType', _id: rs.id}});
          }
        })
      }
    },
    components:{
      productType_conf,
      tField,
    },
    computed: {
      // components_name(){
      //   let str="prodcutType_name";
      //   let {ctl, title="", _id=""} = this.query;
      //   if(_id){
      //     str = "productType_conf"
      //   }
      //   return str
      // }
    },
    created() {
      this.query = this.$route.query;
      this.pageInit();
	  $('.header-wrapper').css({'z-index':11})
    }
  }
</script>
<style rel="stylesheet/less" scoped lang="less">@import "../../common/style/mixin";
  form {
    .submitBtn();
  }
  .pt{
    .form{
      border: 1px solid #ccc;
      padding-bottom: 15px;
      .field{
        padding:0 15px;
      }
    }
    .header{
      background-color: rgba(0, 0, 0, 0.75);
      padding: 10px;
      color: #fff;
      font-size: 14px;
    }
  }
</style>
